<!doctype html>
<!--[if IE 7 ]>
<html lang="zh-cn" class="isie ie7 oldie no-js" xmlns:th="http://www.thymeleaf.org"> <![endif]-->
<!--[if IE 8 ]>
<html lang="zh-cn" class="isie ie8 oldie no-js" xmlns:th="http://www.thymeleaf.org"> <![endif]-->
<!--[if IE 9 ]>
<html lang="zh-cn" class="isie ie9 no-js" xmlns:th="http://www.thymeleaf.org"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!-->
<html lang="zh-cn" class="no-js" xmlns:th="http://www.thymeleaf.org">
<!--<![endif]-->
<head th:replace="_fragments/header :: head(~{:: title})">
    <title th:text="${article.title}"></title>
</head>
<body>
<header th:replace="_fragments/nav :: navbar"></header>

<!-- Content -->
<section id="main" class="container">
    <!-- Articles and Comments -->
    <header>
        <h2 th:text="${article.title}"></h2>
        <div class="article-info">
            <i class="fa fa-calendar"></i>
            <span class="info-content"
                  th:text="${#dates.format(article.updateTime, 'yyyy-MM-dd HH:mm')}"></span>
            <i class="fa fa-list"></i>
            <span class="info-content" th:text="${article.type.name}"></span>
            <i class="fa fa-eye"></i>
            <span class="info-content" th:text="${article.views}"></span>
            <i class="fa fa-tag"></i>
            <span class="info-content" th:each="tag : ${article.tags}" th:text="${tag.name}"></span>
        </div>
    </header>
    <div class="row">
        <div class="12u">
            <section class="box">
                <div id="md" th:utext="${article.content}"></div>

                <!-- Comments -->
                <div class="comments" th:fragment="commentList">
                    <h2 style="margin-top: 60px">评论</h2>
                    <div class="comment" th:each="comment : ${comments}">
                        <div class="comment-info">
                            <span class="glyphicon glyphicon-comment"></span>
                            <span class="info-content" th:text="${comment.user.nickname}"></span>
                            <span class="glyphicon glyphicon-envelope"></span>
                            <span class="info-content" th:text="${comment.user.email}"></span>
                            <span class="glyphicon glyphicon-calendar"></span>
                            <span class="info-content"
                                  th:text="${#dates.format(comment.createTime, 'yyyy-MM-dd HH:mm')}">
                    </span>
                            <span class="info-content">
                        <a th:onclick="'javascript:reply(' + ${comment.id} + ')'">回复</a>
                    </span>
                            <span class="info-content" th:if="${session.userId == 1}">
                        <a th:href="@{'/comments/delete/' + ${article.id} + '/' + ${comment.id}}">删除</a></span>
                        </div>
                        <div class="comment-content" th:text="${comment.content}">
                        </div>

                        <div class="sub-comments" th:if="${comment.replyComments.size() > 0}">
                            <div class="sub-comment" th:each="subcomment : ${comment.replyComments}">
                                <div class="comment-info">
                                    <span class="glyphicon glyphicon-comment"></span>
                                    <span class="info-content" th:text="${subcomment.user.nickname}"></span>
                                    <span class="glyphicon glyphicon-envelope"></span>
                                    <span class="info-content" th:text="${subcomment.user.email}"></span>
                                    <span class="glyphicon glyphicon-calendar"></span>
                                    <span class="info-content"
                                          th:text="${#dates.format(subcomment.createTime, 'yyyy-MM-dd HH:mm')}">
                            </span>
                                    <span class="info-content">
                                <a th:onclick="'javascript:reply(' + ${subcomment.id} + ')'">
                                    回复
                                </a>
                            </span>
                                    <span class="info-content" th:if="${session.userId == 1}">
                                <a th:href="@{'/comments/delete/' + ${article.id} + '/' + ${subcomment.id}}">删除</a>
                            </span>
                                </div>
                                <div class="sub-comment-content">
                                    <strong th:text="'@' + ${subcomment.parentComment.user.nickname}"></strong>
                                    <span th:text="${subcomment.content}"></span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <form th:action="@{'/comments/' + ${article.id}}" method="post">
                    <div class="form-group" id="comment-form">
                        <h2 style="margin-top: 60px">发表评论</h2>
                        <div th:if="${session.userId == null}">
                            <label for="comment1"></label>
                            <textarea id="comment1" rows="10" class="comment-area form-control" name="content"
                                      placeholder="想发表评论需要先登录噢，快去登录吧" disabled style="resize: none"></textarea></div>
                        <div th:if="${session.userId != null}">
                            <label for="comment"></label>
                            <textarea id="comment" rows="10" class="comment-area form-control" name="content"
                                      placeholder="来发表一条评论吧，期待你精彩的发言" style="resize: none"></textarea>
                        </div>
                    </div>
                    <div th:if="${session.userId != null}">
                        <input style="margin: 20px 0 40px 0;" type="submit" class="button small alt" value="Submit">
                    </div>
                </form>
                <!-- End Comments -->
                <!-- End Articles and Comments -->
            </section>
        </div>
    </div>
</section>
<!-- End Content -->

<!-- Footer -->
<div th:replace="_fragments/footer :: footer"></div>
<!-- End Footer -->

<script>
  function reply (commentId) {
    let comment_form = document.getElementById('comment-form')
    let textarea = document.querySelector('textarea')
    let ipt = document.createElement('input')
    ipt.setAttribute('name', 'parentId')
    ipt.setAttribute('value', commentId)
    ipt.setAttribute('type', 'hidden')
    textarea.setAttribute('placeholder', '回复评论……')
    comment_form.appendChild(ipt)
  }
</script>
</body>
</html>
